<template>
  <div class="chat-input-container">
    <div class="input-wrapper">
      <el-input
        v-model="inputMessage"
        type="textarea"
        :rows="inputRows"
        :placeholder="placeholder"
        :disabled="disabled"
        resize="none"
        @keydown="handleKeyDown"
        @input="handleInput"
        class="message-input"
      />
      <div class="input-actions">
        <el-button-group>
          <el-tooltip content="清空输入" placement="top">
            <el-button 
              type="default" 
              :icon="Delete" 
              @click="clearInput"
              :disabled="!inputMessage.trim()"
            />
          </el-tooltip>
          <el-tooltip content="上传文件" placement="top">
            <el-button 
              type="default" 
              :icon="Upload" 
              @click="handleFileUpload"
            />
          </el-tooltip>
        </el-button-group>
        
        <el-button
          type="primary"
          :icon="Promotion"
          :loading="loading"
          :disabled="!canSend"
          @click="handleSend"
          class="send-button"
        >
          {{ loading ? '发送中...' : '发送' }}
        </el-button>
      </div>
    </div>
    
    <div class="input-footer">
      <div class="input-tips">
        <span class="tip-item">
          <el-icon><InfoFilled /></el-icon>
          Enter 发送，Shift + Enter 换行
        </span>
        <span class="tip-item" v-if="inputMessage.length > 0">
          {{ inputMessage.length }} / {{ maxLength }}
        </span>
      </div>
      
      <div class="mode-selector" v-if="showModeSelector">
        <el-radio-group v-model="selectedMode" size="small">
          <el-radio-button label="normal">普通对话</el-radio-button>
          <el-radio-button label="stream">流式对话</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    
    <!-- 文件上传对话框 -->
    <input
      ref="fileInput"
      type="file"
      style="display: none"
      @change="handleFileChange"
      accept=".txt,.md,.json,.csv,.xlsx,.docx"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Delete, 
  Upload, 
  Promotion, 
  InfoFilled 
} from '@element-plus/icons-vue'

interface Props {
  loading?: boolean
  disabled?: boolean
  placeholder?: string
  maxLength?: number
  showModeSelector?: boolean
  defaultMode?: 'normal' | 'stream'
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  disabled: false,
  placeholder: '请输入您的问题...',
  maxLength: 2000,
  showModeSelector: false,
  defaultMode: 'normal'
})

const emit = defineEmits<{
  send: [message: string, mode: 'normal' | 'stream']
  clear: []
  'file-upload': [file: File]
}>()

const inputMessage = ref('')
const inputRows = ref(1)
const selectedMode = ref<'normal' | 'stream'>(props.defaultMode)
const fileInput = ref<HTMLInputElement>()

const canSend = computed(() => {
  return inputMessage.value.trim().length > 0 && 
         !props.loading && 
         !props.disabled &&
         inputMessage.value.length <= props.maxLength
})

// 监听输入内容变化，自动调整文本框高度
const handleInput = () => {
  const lines = inputMessage.value.split('\n')
  inputRows.value = Math.min(Math.max(lines.length, 1), 5)
}

// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    if (event.shiftKey) {
      // Shift + Enter 换行
      return
    } else {
      // Enter 发送
      event.preventDefault()
      handleSend()
    }
  }
}

// 发送消息
const handleSend = () => {
  if (!canSend.value) return
  
  const message = inputMessage.value.trim()
  const mode = selectedMode.value
  
  emit('send', message, mode)
  inputMessage.value = ''
  inputRows.value = 1
}

// 清空输入
const clearInput = () => {
  inputMessage.value = ''
  inputRows.value = 1
  emit('clear')
}

// 处理文件上传
const handleFileUpload = () => {
  fileInput.value?.click()
}

const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (file) {
    if (file.size > 10 * 1024 * 1024) { // 10MB限制
      ElMessage.error('文件大小不能超过10MB')
      return
    }
    
    emit('file-upload', file)
    target.value = '' // 清空input，允许重复选择同一文件
  }
}

// 监听模式变化
watch(selectedMode, (newMode) => {
  // 可以在这里添加模式变化的处理逻辑
})

// 暴露方法给父组件
defineExpose({
  clearInput,
  focus: () => {
    // 聚焦到输入框
    const textarea = document.querySelector('.message-input textarea') as HTMLTextAreaElement
    textarea?.focus()
  }
})
</script>

<style scoped>
.chat-input-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-top: 16px;
}

.input-wrapper {
  position: relative;
}

.message-input {
  margin-bottom: 12px;
}

.message-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  min-height: 40px;
  max-height: 120px;
}

.message-input :deep(.el-textarea__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.send-button {
  min-width: 80px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  font-weight: 600;
}

.send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.input-tips {
  display: flex;
  gap: 16px;
  align-items: center;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.tip-item .el-icon {
  font-size: 14px;
}

.mode-selector :deep(.el-radio-button__inner) {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
}

@media (max-width: 768px) {
  .chat-input-container {
    padding: 12px;
  }
  
  .input-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .input-tips {
    justify-content: center;
  }
  
  .mode-selector {
    display: flex;
    justify-content: center;
  }
}
</style>
